<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<navbar  title="订单结算" :isGoBack="true" :isNotice="true" :bgColor="bgColor" :btnColors='btnColor' :visible="true" ></navbar>	
		<!-- #endif -->				
		<view class="main-cur pb-20 pt-10" >			   
		    <view isLink  class="flex align-center" style="height: 110rpx;background-color: #fff;padding-left: 30rpx;" @click="routeToNext(orderType)">
				<view slot="icon" class="flex  justify-start confirm-address-icon">
					<image src="../../../static/resource/order_map.png"  style="width: 32rpx; height: 32rpx;"></image>
				</view>
				
				<view class="flex justify-between" style="width: 100%">
					<view  class="flex flex-direction  confirm-address-wrap ml-15" v-if="orderType == 2">
						<view class="m-5">					  
							<text class="text-df">{{comfirmInfo.address.realname}}</text>
							<text  class="ml-20 text-sm">{{comfirmInfo.address.phone}}</text>
						</view>
						<view class="flex">
						   <view class="confirm-address-wrap-detail mt-5 text-sm text-gray">{{comfirmInfo.address.province}}{{comfirmInfo.address.city}}{{comfirmInfo.address.region}}{{comfirmInfo.address.address}}</view>
						</view>
				  </view>
				  <view  class="flex flex-direction  confirm-address-wrap ml-15" v-if="orderType == 1">
							<view class="m-5">					  
								<text class="text-df">{{comfirmInfo.shop_address.realname}}</text>
								<text  class="ml-20 text-sm">{{comfirmInfo.shop_address.phone}}</text>
							</view>
							<view class="flex">
							   <view class="confirm-address-wrap-detail mt-5 text-sm text-gray">{{comfirmInfo.shop_address.province}}{{comfirmInfo.shop_address.city}}{{comfirmInfo.shop_address.region}}{{comfirmInfo.shop_address.address}}</view>
							</view>
				  </view>
				  <view class="flex  justify-start mr-20">
					 <u-icon name="arrow-right" color="rgba(3, 31, 55, 0.6);" size="15"></u-icon> 
				  </view>			     
			   </view>
		    </view>		    
		</view>
		
		<view class="main-cur flex flex-direction text-dff " style="line-height: 2.55555556;">
			<text class="pl-35">商品明细</text>		   
			<view class="flex pl-35 flex-direction" v-for="(item,index) in shoppingCartList.list" :key="index">
				<view class="flex">
					<view slot='icon' class="flex align-center">
						<image class="grid-img" :src="item.goods_image" bindtap="handleChangeGoods" 	mode="scaleToFill"></image>
					</view>
					<view class="confirm-wrap-content flex flex-direction justify-between ml-10" slot='content' style="width: 100%;">
						<view class="flex" style="flex-direction:column;margin-top: 20rpx;">
							<view class='flex align-center cell text-lg ellipsis-l2 text-content'>{{item.goods_title}}</view>
							<!-- <view class='flex align-center cell text-sm text-gray text-content'>{{item.goods_spec}}</view> -->
						</view>
						<view class='confirm-wrap-price flex justify-between text-lg'>
							<text class="text-red text-content">￥{{item.selling_price}} /天</text>
							<text class="text-red text-content" v-if="item.cost_price>0" style="font-size: 22rpx;margin-left: -180rpx;margin-top: 7rpx">优惠：{{item.cost_price}}</text>
							<!-- <view style="margin-right: 5rpx;">×{{item.number}}</view> -->
						</view>
						<view class='confirm-wrap-price flex justify-between text-lg mr-10' @click="feeGoods(1)">
							<text class="productNameText">配件(免费):{{item.fee_list_name}}</text>
							<u-icon name="arrow-right" color="color:rgba(3, 31, 55, 0.6);" size="15"></u-icon>
						</view>
					</view>
				</view>				
				<view class="flex mt-20 mb-20" v-if="comfirmInfo.acces_list.length>0">
					<view class="flex" v-for="(image,index) in comfirmInfo.acces_list" :key="key">
						<image v-if="index<5" class="mr-15"  :src="image.goods_logo" style="width: 80rpx; height: 80rpx;"></image>
					</view>
					<view class="flex" style="position: absolute; right: 15px;" @click="feeGoods(2)">
						<text style="color:rgba(1, 31, 55, 0.8);font-size: 28rpx;">付费配件({{comfirmInfo.acces_list.length}})</text>
						<u-icon name="arrow-right" color="rgba(3, 31, 55, 0.6);" size="15"></u-icon>
					</view>
				</view>
			</view>	
			
			<view class="flex justify-between pr-20 pt-20" style="border-top: 1rpx solid #f3f3f3;">
				<text class="text-sm ml-20" style="color:rgba(1, 31, 55, 0.8);font-size: 28rpx;">下单方式</text>	
				<text class="text-sm" style="color: #011F37;font-size: 28rpx;" v-if="orderType==2">快递邮寄</text>	
				<text class="text-sm" style="color: #011F37;font-size: 28rpx;" v-if="orderType==1">门店自取</text>	
			</view>
			<view class="flex mt-20 align-center justify-between" style=" background: #fff; height: 30rpx;width: 100%; margin-bottom: 24px;">
				<view class="title ml-20" style="color:rgba(1, 31, 55, 0.8);font-size: 28rpx;">卖家留言</view>
				<input  v-model="remark" class="uni-input mr-30 text-right" focus placeholder="请添加备注(150字以内)" placeholder-class="remark" style="font-size: 24rpx;"/>	
			</view>			
		</view>
		<!-- //器材租金 付费配件 优惠券 -->
		<view class="main-cur flex flex-direction text-dff ">
			<view class="flex justify-between pr-20 pt-30" style="border-top: 1rpx solid #f3f3f3;">
				<text class="text-sm ml-20" style="color:rgba(1, 31, 55, 0.8);font-size: 28rpx;">器材租金</text>	
				<text class="text-df">￥{{comfirmInfo.goods_lease_money}}</text>
			</view>
			
			<view class="flex justify-between pr-20 pt-30" >
				<text class="text-sm ml-20" style="color:rgba(1, 31, 55, 0.8);font-size: 28rpx;">付费配件</text>	
				<text class="text-df">￥{{comfirmInfo.lease_money}}</text>	
			</view>		
			
			<view class="flex justify-between pr-15 pt-30 pb-10" >
				<text class="text-sm ml-20" style="color:rgba(1, 31, 55, 0.8);font-size: 28rpx;">优惠券</text>	
				<view class="flex mr-15" @click="routeToCoupon()">
					<text style="color: rgba(1, 31, 55, 0.4);" v-if="comfirmInfo.coupon_money<=0">请选择优惠券</text>
					<text style="color: #FF2A00;" v-if="comfirmInfo.coupon_money>0">-￥{{comfirmInfo.coupon_money}}</text>
				  	<u-icon name="arrow-right" color="rgba(3, 31, 55, 0.6);" size="15"  ></u-icon>
				</view>
			</view>	
			
			<view class="flex justify-end align-center p-30">
				<text class="text-sm" style="color: rgba(1, 31, 55, 0.6);">已优惠</text>
				<text class="ml-15" style="font-size: 28rpx;color: #FF2A00;">￥0.00</text>
				<text class="text-sm ml-15" style="font-size: 24rpx;color: #011F37;">合计租金</text>
				<text class="ml-15" style="font-weight: bold;font-size: 28rpx;color: #011F37;">￥{{comfirmInfo.total_money}}</text>	 
			</view>			
		</view>		
		
		<view class="main-cur flex flex-direction text-dff ml-20" v-if="comfirmInfo.insure_fee>0">
			<view  class="flex justify-between pr-20 pt-30 ml-20 align-center text-center">
				<view class="flex align-center text-center" style="font-size: 28rpx;color: rgba(1, 31, 55, 0.8);">
					<text style="">安心租</text>
					<text class="ml-25" style="color: #011F37;">¥{{comfirmInfo.insure_fee}}</text>
				</view>
				<u-switch v-model="safe" @change="change" activeColor="#FFA200;"></u-switch>
			</view>
			
			<view class="flex flex-direction mt-15 ml-20 mr-20 mb-20" style="background: rgba(255,162,0,0.05);border-radius: 16rpx;">
				<view class="flex mt-30 ml-30">					
					<view class="">
						<text style="font-weight: bold;font-size: 28rpx;color: #011F37;">增加保障，使用更安心</text>
							<view class="flex mt-20" style="font-size: 24rpx;color: #FFA200;">
								 <view>
									 <image src="../../../static/resource/safe.png" style="width: 24rpx;height: 24rpx"></image>
									 <text class="ml-15">购入价格低</text>
								 </view>							 
								  <view class="ml-15">
									  <image src="../../../static/resource/safe.png" style="width: 24rpx;height: 24rpx"></image>
									  <text class="ml-15">起赔额为0</text>
								  </view>
							</view>
					</view>	
					<view class="safe-right">
						<text style="font-size: 22rpx;color: #FFFFFF;margin-right: 10rpx;">80%用户选择</text>
					</view>							
				</view>
				<view class="flex mt-15 ml-20 mr-20 p-30" style="background: #ffff;border-radius: 16rpx;">
					<text style="font-size: 26rpx;color: rgba(1, 31, 55, 0.8);line-height: 40rpx;;">{{comfirmInfo.InsuranceContent}}</text>						
				</view>				
				<view class="flex justify-center align-center text-center mt-20 mb-20 " @click="safeshow = true">					
					<text class="mr-5" style="font-size: 24rpx;color: #FFA200;">查看详情</text>
					<u-icon name="arrow-right" color="#FFA200" size="15"></u-icon>							
				</view>				
			</view>
		</view>
		
		<view class="main-cur flex flex-direction text-dff" style="padding-bottom: 20rpx;margin-bottom: 81px;">
			<view class="flex justify-between pr-20 pt-30" style="border-top: 1rpx solid #f3f3f3;">
				<text class="text-sm ml-20" style="color:rgba(1, 31, 55, 0.8);font-size: 28rpx;">器材押金</text>	
				<text class=".text-df">￥{{shoppingCartList.deposit_price}}</text>
			</view>			
			<view class="flex justify-between pr-20 pt-30" >
				<text class="text-sm ml-20" style="color:rgba(1, 31, 55, 0.8);font-size: 28rpx;">付费配件押金</text>	
				<text class="text-df">￥{{shoppingCartList.acces_deposit_price}}</text>	
			</view>				
		</view>	
				
		
				  
		
	<view class="flex mb-30" style=""></view>	
	<!--免费商品-->
	<t-accesGoods :show="showfee" ref="accesList" @accesClose="accesClose" :atype='atype' @accesOk="accesOk"></t-accesGoods>
	<!-- 地址信息 -->
	<biz-address  :show="showSelection" ref="goodsSpec" @chooseCancel="chooseCancel" @chooseaddess='chooseaddess'></biz-address>	  
	
	<!-- 优惠券信息 -->
	<biz-coupon  :show="showcoupon" ref="couponSpec" @CancelCoupon="CancelCoupon" @chooseCoupon='chooseCoupon'></biz-coupon>
	
	<!-- 结算信息 -->
	<t-submit-bar :show="showPay" :maskClosable="showSelection"  :setting_money="comfirmInfo.allMoney+''"  @confirm="wxconfirm" :type="settle_type"></t-submit-bar>	
	<!-- 时间选择 -->
	<date-picker :show="showdate"  @closePicker="closePicker" ref="picker" :start_time="comfirmInfo.start_time"   :end_time="comfirmInfo.end_time" @confirmPicker="confirmPicker"></date-picker>
	
	<u-popup :show="safeshow" @close="safeclose" @open="open" :round="10">		
		<view class="safe_bx">
			<view class="specs-top align-center text-center"> 
				<view style="font-size: 35rpx;color: #011F37;">安心租</view>
				<view class="flex cancel-button">
					<u-icon name="close-circle" color="#999999" size="22" @click="safeshow = false"></u-icon>					
				</view>   
			</view>	
			<view class="flex flex-direction mt-20" style="font-size: 24rpx;color: #FFA200;">
				 <view class="flex flex-direction">
					 <view class="flex align-center text-center">
					 	<image src="../../../static/resource/safe-bx.png" style="width: 24rpx;height: 24rpx"></image>
						<text style="font-weight: bold;font-size: 28rpx;color: #FFA200;">安心租是什么?</text>
					 </view>					 
					  <text class="mt-20" style="color: rgba(1, 31, 55, 0.6);line-height: 35rpx;">{{comfirmInfo.InsuranceWhy}}</text>
				 </view>							 
				  <view class="mt-20">
					 <view class="flex align-center text-center pb-20">
					 	<image src="../../../static/resource/safe-bx.png" style="width: 24rpx;height: 24rpx"></image>
					 	<text style="font-weight: bold;font-size: 28rpx;color: #FFA200;">安心租的保障范围</text>
					 </view>
					  <text class="mt-20" style="color: rgba(1, 31, 55, 0.6);line-height: 35rpx;">{{comfirmInfo.InsuranceRange}}</text>
				  </view>
			</view>
			
		</view>
		
	</u-popup>
			
	</view>
</template>

<script>
	import address from "@/components/address/index.vue";
	import coupon from "@/components/coupon/index.vue";
	import submit from "@/components/submit-bar/index.vue";
	import picker from "@/components/date-picker/index.vue";
	import accesGoods from "@/components/accesGoods/index.vue";
	export default {
		components: {
		   "biz-address": address,
		   "biz-coupon": coupon,
		   "t-submit-bar": submit,
		   "date-picker": picker,
		    "t-accesGoods":accesGoods,
		},
		data () {
			return {	
				value:'',
				selectDate: "",
				machineShow: false, 
				showSelection:false,
				settle_type:6,
				showPay:true,
				showdate:false,
				shopInfo:{},
				comfirmInfo:{
					address:{
					  realname:''	
					}
				},
				shoppingCartList: [],
				remark:"",
				quick_info:{},
				total_money:'0.00',
				allMoney:"0.00",
				discountPrice:0.00,
				discountId:'',
				orderType:2,
				current: 1,
				addressId:'',
				info:{
				},
				defaultDateMultiple: [],
				leaseId:'',
				safe:true,
				showfee:false,
				goodsId:'',
				atype:1,
				safeshow:false,
				shopId:'',
				coupon_name:'',
				showcoupon:false,
				redId:'',
			}
		},
		onLoad(options) {
			//options.value="{"discountId":"","goodsInfo":"{\"goodsId\":5057,\"specId\":14213,\"number\":1,\"token\":\"2088902099005185\",\"login_type\":\"app\"}","addressId":831,"defaultDateMultiple":"[\"2024-10-22\",\"2024-10-23\",\"2024-10-24\"]","leaseId":"{\"leaseId\":[5060,5061]}","orderType":2}"
			console.log('options',options.value);
			let evnts=JSON.parse(options.value)
			this.addressId= evnts.addressId
			this.defaultDateMultiple=JSON.parse(evnts.defaultDateMultiple)
			this.discountId=evnts.discountId
			this.quick_info=evnts.goodsInfo
			this.leaseId=evnts.leaseId
		    this.orderType=evnts.orderType
			this.shopId=evnts.shopId
		},
		      
		onShow(){
		     this.getConfirm()
		},
		methods:{			
			safeclose() {
			  this.safeshow = false
			  // console.log('close');
			},
			feeGoods(type){
				this.showfee=true
				this.atype=type
				this.$refs.accesList.NgoodsSpecs(this.goodsId,type,this.leaseId)
			},
			accesClose(){
				this.showfee=false
			},
			change(events){
				let comfirmInfo=this.comfirmInfo
				if(!events){
					comfirmInfo.allMoney=(Math.round(comfirmInfo.allMoney*100)- Math.round(comfirmInfo.insure_fee*100))/100
				}else{
					comfirmInfo.allMoney=( Math.round(comfirmInfo.allMoney*100)+ Math.round(comfirmInfo.insure_fee*100))/100
				}
				this.safe=events
				this.comfirmInfo=comfirmInfo
				console.log(events)
			},
			//修改时间
			confirmPicker(events){
				this.selectDate=events.selectDate
				this.showdate=false
			},
			//关闭时间选择
			closePicker(){
				this.showdate=false
			},
			//打开时间选择器
			timeOpen() {
				console.log('comfirmInfo',this.comfirmInfo)
				this.showdate=true
			    this.$refs.picker.showDialog(this.comfirmInfo.start_time,this.comfirmInfo.end_time)
			},
			onChangeremark(){
				
			},
			//支付
			wxconfirm(){
			    let obj_data={					
					token:uni.getStorageSync('userInfo').app_openid,
					login_type:'app',
					orderType:this.orderType,
					redId:this.redId,
					goodsInfo:this.quick_info,
					addressId:this.addressId,
					defaultDateMultiple:JSON.stringify(this.defaultDateMultiple),
					leaseId:this.leaseId,
					is_safe:this.safe?1:0,	
					remark:this.remark
			    }
				if(this.orderType==1) obj_data.addressId=this.shopId
				console.log('obj_data',obj_data)
				this.$http.orderSubmit(obj_data).then(res=>{
					console.log('res',res)
					if(res.resCode=="9999"){
						console.log(res.data)
						my.tradePay({
						  tradeNO:res.data.trade_no,
						  success: (res1) => {
							  console.log(res1,'支付成功 res1')
							  if(res1.resultCode == 9000){
								  wx.navigateTo({
								    url: '/pages/pagesOrder/success/index?pay_no='+res.data.pay_no 
								  })								
							  }else {
								uni.showToast({title:'支付失败，请联系客服',icon:"none"})	
								setTimeout(function () {
									wx.navigateTo({
									  url: '/pages/order/index' 
									})
								}, 1500) //延迟时间
							  }
						  },
						  fail: (err1) => {
							 // 支付不成功，具体原因看返回，去对照文档
						    console.log(err1,'支付不成功 err1')
						    uni.showToast({title:'支付失败，请联系客服',icon:"none"})
							setTimeout(function () {	
								wx.navigateTo({
								  url: '/pages/order/index' 
								})
							}, 1500) //延迟时间
						  }
						});						
					  }else{
						uni.showToast({title:res.resMessage,icon:"none"})
					  }
				})			      		
			},
			//跳转地址
			bindAddress(){
				uni.navigateTo({
					url:"/pages/pagesuser/address/add-edit/index?type=c"
				})
			},
			//确认地址
			chooseaddess(events){
				this.addressId=events.id
				if(this.orderType==1) this.shopId=events.id
				else this.shopId=''
				this.getConfirm()
				this.showSelection=false
			},
			//选择收货地址
			routeToNext(type){				
				let that=this
				let qucik = JSON.parse(this.quick_info)
				this.$http.AddressList({
					goodsId:qucik.goodsId,
					token:uni.getStorageSync('userInfo').app_openid,
					login_type:'app',
					type,
				}).then(res=>{
					if(res.resCode=='9999'){
						this.showSelection=true
						that.$refs.goodsSpec.showSpecs(res.data)        
					}
				}) 			
			},
			chooseCancel(){
				this.showSelection=false
			},
			
			
			routeToCoupon(type){
				let that=this
				this.$http.coupon_list({					
					token:uni.getStorageSync('userInfo').app_openid,
					login_type:'app',					
					status:0,
				}).then(res=>{
					if(res.resCode=='9999'){
						this.showcoupon=true
						that.$refs.couponSpec.showSpecs(res.data)        
					}
				}) 			
			},
			CancelCoupon(){
				this.showcoupon=false
			},
			chooseCoupon(events){
				this.showcoupon=false
				this.redId=events.id
				console.log('events---',events);
				this.getConfirm()
					
				
			},		
			
			//切换
			changeOrder(events){
				this.orderType=events.currentTarget.dataset.ordertype      
				if(this.orderType==1){
				    this.total_money=this.allMoney
				}else if(this.orderType==2){
				    this.total_money=Number(this.allMoney) + Number(this.comfirmInfo.freight_price)
				}
			},
			
			//获取购物车信息
			getConfirm(){     
			    let that=this
			    this.shopInfo=uni.getStorageSync('shopInfo')	
			    console.log("defaultDateMultiple",this.defaultDateMultiple)
			    //立即购买 quick
			    let obj_data={
			    	token:uni.getStorageSync('userInfo').app_openid,
			    	login_type:'app',
			    	discountId:this.discountId,
			    	storageId:uni.getStorageSync("shopInfo").storageId,
			    	goodsInfo:this.quick_info,
			    	addressId:this.addressId,
			    	defaultDateMultiple:JSON.stringify(this.defaultDateMultiple),
			    	leaseId:this.leaseId,
				    orderType:this.orderType,
				    shopId:this.shopId,  
					redId:this.redId,
			    }
			    this.$http.preView(obj_data).then(res=>{
			          if(res.resCode=="9999"){	
			    		console.log('address',res.data.address)
			    		that.addressId=res.data.address.id
			    		that.comfirmInfo=res.data  
						that.goodsId=res.data.goodsId
			    		that.selectDate=res.data.selectDate 
			    		that.allMoney=res.data.allMoney         
			    		that.shoppingCartList=res.data
			    		that.total_money=res.data.allMoney	
			    		that.date_time=res.data.date_time
			    		that.defaultDateMultiple=res.data.defaultDateMultiple
			    		if(this.orderType==1){
			    		  this.total_money=this.allMoney
			    		}else if(this.orderType==2){
			    		  this.total_money=Number(this.allMoney) + Number(this.comfirmInfo.freight_price)
			    		}
			          }else{
			            uni.showToast({title:res.resMessage,icon:"none"})
			            setTimeout(()=>{
			              uni.navigateBack({
			                delta: 1, // 返回上一级页面。
			                success: function() {
			                    console.log('成功！')
			                }
			              })
			            },2000)
			          }
			        })
			},
		}
	}
</script>

<style>
	.safe_bx{
		 display: flex;
		 flex-direction: column;
		
		
		 margin-left: 20rpx;
		 margin-bottom: 20rpx;
	}
	.specs-top{
	  display: flex;
	  flex-direction: row;
	  font-size: 23rpx;
	  justify-content: center;
	  align-items: center;
	  padding-bottom: 10rpx;
	  // border-bottom: 1rpx solid rgb(240, 235, 235);
	  padding-top: 20rpx;
	 
	
	 }
	.cancel-button{
		position: absolute;
		margin-top: -15rpx;
		right: 10rpx;
	}
	.remark{
		font-size: 24rpx;
	}
	.safe-right{
		display: flex;
		position: absolute;
		right: 40rpx;
		background: #FFA200;;
		border-radius: 30rpx 0rpx 0rpx 30rpx;
		height: 60rpx;
		align-items: center;
		text-align: center;
		padding-left: 25rpx;
	}
	
	.main-cur{
		display:flex;
		flex-direction:column;
		margin-top: 15rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		/* padding: 20rpx 20rpx 35rpx 20rpx; */
		background-color: #ffff;		
		border-radius:20rpx;
	}
	page{
	  background-color: #f3f6fb;
	}
	
	.mask {
	  position: fixed;
	  width: 100%;
	  height: 100%;
	  left: 0;
	  right: 0;
	  top: 0;
	  bottom: 0;
	  display: flex;
	  background-color: rgba(0, 0, 0, 0.7);
	  z-index: 9999;
	  flex-direction: column;
	  justify-content: flex-end;
	}
	
	.content {
	  display: flex;
	  flex-direction: column;
	  width: 100%;
	  background: white;
	  border-top-right-radius: 20rpx;
	  border-top-left-radius: 20rpx;
	}
	
	.top {
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	  align-items: center;
	  height: 100rpx;
	  border-bottom: 1rpx solid #d3cfcf;
	}
	
	.top-text {
	  font-size: 30rpx;
	  width: 150rpx;
	  height: 100rpx;
	  display: flex;
	  flex-direction: row;
	  justify-content: center;
	  align-items: center;
	}
	
	.top-left-color {
	  color: #878787;
	}
	
	.top-left-color-hover {
	  color: #f1eaea;
	}
	
	.top-right-color {
	  color: #1296DB;
	}
	
	.top-right-color-hover {
	  color: #82ccf3;
	}
	
	.item {
	  width: 100%;
	  align-items: center;
	  justify-content: center;
	  display: flex;
	  flex-direction: row;
	  font-size: 18px;
	}
	
	
	.shop_info{
	  background: #fff;
	   width: 100%;
	   height: auto;
	   display: flex;
	  flex-direction: row;
	  font-family: "Microsoft YaHei";
	}
	.shop_detail{
	  font-size: 28rpx;
	  margin: 20rpx 50rpx;
	}
	.shop_detail_l2{    
	  display: flex;
	  flex-direction: row;
	  color: gray;
	  font-size: 13px;
	  margin-left: -19px;
	  width: 490rpx;
	  margin-top: 10rpx;
	}
	.shop_type{
	  display: flex;
	  flex-direction: row;
	  padding: 17rpx;
	  width: 157rpx;
	  background: #fff;
	  height: 25rpx;
	  border-radius: 35rpx;
	  margin-top: 46rpx;
	  margin-right: 19rpx;
	  border: 2rpx solid rgb(216, 210, 210);
	  box-shadow: 0 0 5px rgb(202, 196, 196);
	}
	
	.shop_type_l1{
	  background: #000000;
	      color: white;
	      text-align: center;
	      font-size: 28rpx;
	      margin: -10rpx -9rpx;
	      padding: 17rpx 57prx;
	      width: 103rpx;
	      border-radius: 20rpx;
	}
	
	.shop_type_l2{
	 
	    color: rgb(165, 155, 155);
	    text-align: center;
	    font-size: 28rpx;
	    margin: -2rpx -9rpx;
	    padding: 7rpx 57prx;
	    width: 103rpx;
	    border-radius: 20rpx;
	  
	}
	.grid-img{  
	  width: 120rpx;
	  height: 120rpx;
	  margin: 15rpx;
	  border-radius: 10rpx;
	  
	}
	
	.confirm-address-line{
	  width: 750rpx;
	  height: 4rpx;
	  background-color: gray;
	}
	
	.productNameText{
		width: 458rpx;
		text-overflow:ellipsis;
		display:-webkit-box;
		word-break:break-all;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:1;overflow:hidden;
		font-size: 24rpx;
		color: #011F37;
		padding-right: 20rpx;
	}
	.selectDate{
	  background-color: #fff;
	  padding-left: 32rpx;
	  font-size: 26rpx;
	  color: rgb(208 47 47);
	  margin-top: -10rpx;
	  padding-bottom: 20rpx;
	}
	.submit-btn-right {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  color: #FFF;
	  min-width: 240rpx;
	  width: 100%;
	  height: 76rpx;
	  opacity: 1;
	  border-radius: 38rpx;
	  margin-top: 2rpx;
	}

</style>